<template>
  <div class="ai-tools-top bg-gray-2700 py-3 px-4 ">
    <div class="max-w-15xl mx-auto flex flex-col md:items-center md:justify-between md:flex-row">
      <slot name="top-left"></slot>
      <div class="flex items-center flex-col md:flex-row pt-2.5 mt-2.5 border-t border-white border-opacity-30 md:border-t-0 md:pt-0 md:mt-0 md:flex-nowrap">
        <slot name="top-right"></slot>
        <div class="flex items-center justify-between gap-3 w-full md:w-auto">
          <span class="text-md text-white flex-shrink-0">
            {{$t('aitools_shareOn')}}
          </span>
          <div class="flex flex-1 align-center justify-end gap-3">
            <a :href="`https://www.facebook.com/sharer.php?u=${ uri }`"
              rel="nofollow"
              class="flex items-center group to-share hover:border-purple-1300"
              target="_blank">
              <svg-icon className="w-4 h-4 group-hover:hidden"
                iconName='facebook_default'></svg-icon>
              <svg-icon className="w-4 h-4 hidden group-hover:block"
                iconName='facebook_selected'></svg-icon>
            </a>
            <a :href="`https://twitter.com/intent/tweet?url=${ uri }`"
              rel="nofollow"
              class="flex items-center group to-share hover:border-purple-1300"
              target="_blank">
              <svg-icon className="w-4 h-4 group-hover:hidden"
                iconName='twitter_default'></svg-icon>
              <svg-icon className="w-4 h-4 hidden group-hover:block"
                iconName='twitter_selected'></svg-icon>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AiToolsTop',
  data() {
    return { uri: `https://www.toolify.ai${this.$route.fullPath}` }
  },
}
</script>
